<template>
  <div class="home">
    <div ref="echarts" style="width: 600px; height: 800px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import "../../china"; // 引入中国地图
export default {
  name: "HomeView",
  data() {
    return {
      myChart: null, // echatts对象
      chartData: [
        // 详情面板的文本
        { name: "河南", value: 25, profit: 300, cancellation: 2 },
        { name: "北京", value: 254 },
        { name: "上海", value: 20 },
        { name: "青海", value: 60 },
        { name: "山东", value: 60 },
      ],
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.myChart = echarts.init(this.$refs.echarts); // 初始echarts
      this.myChart &&
        this.myChart.setOption({
          // 绘制地图
          tooltip: {
            // 提示框信息配置
            triggerOn: "click", // 触发方式
            trigger: "item", // 对象
            formatter: (params) => {
              // 格式化提示框信息。 若要访问 data中的数据则要用箭头函数
              return `地域：${params.name} <br/>
                        在营企业：${
                          this.chartData.find(
                            (item) => item.name === params.name
                          )?.value ?? 0
                        }<br/>
                        上市企业：${
                          this.chartData.find(
                            (item) => item.name === params.name
                          )?.profit ?? 0
                        }<br/>
                        注销企业：${
                          this.chartData.find(
                            (item) => item.name === params.name
                          )?.cancellation ?? 0
                        }
                        `;
            },
          },
          grid: {
            left: 150,
            top: 400,
            width: "35%",
          },
          xAxis: {
            type: "value",
            boundaryGap: [0, 0.01],
          },
          yAxis: {
            type: "category",
            data: ["上海", "青海", "河南", "北京", "山东"],
          },
          // color: "#73c0de",
          visualMap: {
            //左下角的渐变颜色条
            seriesIndex: 0, //指定取哪个系列的数据，即哪个系列的 series.data。
            min: 0,
            max: 300,
            left: "left",
            top: 200,
            text: ["极高", "无数据"],
            inRange: {
              color: ["#e0ffff", "#006edd"],
            },
            show: true,
            hoverLink: true,
          },
          series: [
            // 配置地图
            {
              name: "mapChart",
              type: "map", // 类型
              map: "china", // 地图名称，要和引入的地图名一致
              roam: false, // 是否开启鼠标缩放和平移漫游
              left: "20",
              top: 20,
              label: {
                // 地图省份模块配置
                show: true, // 是否显示省份名称
                position: "right", // 显示位置
              },
              emphasis: {
                // 高亮状态下的多边形和标签样式。
                label: {
                  show: true, // 是否显示标签。
                },
              },
              data: this.chartData, // 提示框的数据源
            },
            {
              name: "barChart",
              type: "bar",
              data: this.chartData,
              itemStyle: {
                normal: {
                  color: function (params) {
                    var colorList = [
                      ["#CBD0B2", "#CBD0B2"],
                      ["#CBD0B2", "#FBFDF1"],
                      ["#79D9C5", "#DEFFF9"],
                      ["#00A896", "#8AF3ED"],
                      ["#056B95", "#58C2EE"],
                      ["#193969", "#599FE1"],
                    ];
                    return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      {
                        offset: 0,
                        color: colorList[params.dataIndex][0],
                      },
                      {
                        offset: 1,
                        color: colorList[params.dataIndex][1],
                      },
                    ]);
                  },
                },
              },
            },
          ],
        });
    },
  },
};

// let p = new Promise((resolve, reject) => {
//   let flag = Math.random() > 0.5 ? true : false;
//   if (flag) {
//     console.log("使用resolve将promise状态从pending变为resolved");
//     resolve("success");
//   } else {
//     console.log("使用reject将promise状态从pending变为rejected");
//     reject("fail");
//   }
// });

// // @1
// p.then(
//   (result) => {
//     console.log("接受resolved的结果");
//     console.log(result);
//   },
//   (err) => {
//     console.log("捕获错误的结果");
//     console.log(err);
//   }
// );
</script>
